<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="detail">挂号详情</div>
            </template>
            <div class="top">
                <el-tag class="ml-2" type="success">
                    <div class="tag">
                        <svg t="1690463348667" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="2291" width="16" height="16">
                            <path d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
                                  fill="#389BFF" p-id="2292"></path>
                        </svg>
                        <span>{{ orderInfo.param?.orderStatusString }}</span>
                    </div>
                </el-tag>

                <div class="right_info">
                    <img src="@/assets/images/code_app.png" alt="">
                    <div class="info">
                        <p>微信 关注“北京114号预约挂号” </p>
                        <p> “快速预约挂号”</p>
                    </div>
                </div>
            </div>

            <!--        订单详情底部的结构-->
            <div class="bottom">
                <div class="left">
                    <el-descriptions
                            class="margin-top"
                            :column="1"
                            border
                    >
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊人信息
                                </div>
                            </template>
                            {{ orderInfo.patientName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊日期
                                </div>
                            </template>
                            {{ orderInfo.quitTime }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊医院
                                </div>
                            </template>
                            {{ orderInfo.hosname }}

                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊科室
                                </div>
                            </template>
                            {{ orderInfo.depname }}

                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    医生职称
                                </div>
                            </template>
                            {{ orderInfo.title }}

                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    医生服务费
                                </div>
                            </template>
                            <el-tag size="small" type="danger">
                                {{ orderInfo.amount }}

                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    挂号单号
                                </div>
                            </template>
                            {{ orderInfo.scheduleId }}

                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    挂号时间
                                </div>
                            </template>
                            {{ orderInfo.createTime }}

                        </el-descriptions-item>
                    </el-descriptions>
                    <div class="btn" v-if="orderInfo.orderStatus==0||orderInfo.orderStatus">
                        <el-popconfirm title="确认要取消嘛?" @confirm="cancel">
                            <template #reference>
                                <el-button>取消预约</el-button>
                            </template>
                        </el-popconfirm>
                        <el-button type="primary" v-if="orderInfo.orderStatus==0" @click="changeQrCode">
                            支付
                        </el-button>
                    </div>
                </div>
                <div class="right">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>注意事项</span>
                            </div>
                        </template>
                        <p>大苏打大苏打大大撒旦1的的1</p>
                        <p style="color: red">
                            大苏打大苏打大大撒旦1的的1，大苏打大苏打大大撒旦1的的1，大苏打大苏打大大撒旦1的的1</p>
                        <p>大苏打大苏打大大撒旦1的的1</p>
                        <p>大苏打大苏打大大撒旦1的的1，大苏打大苏打大大撒旦1的的1，大苏打大苏打大大撒旦1的的1</p>
                        <p>大苏打大苏打大大撒旦1的的1</p>
                        <p>大苏打大苏打大大撒旦1的的1</p>
                    </el-card>
                </div>
            </div>
        </el-card>

        <el-dialog v-model="centerDialogVisible"
                   title="微信支付"
                   width="30%"
                   align-center
                   @close="cancelIndex"
        >
            <div class="qrcode">
                <img :src="imgUrl" alt="">
                <p>请使用微信扫一扫</p>
                <p>扫描二维码支付</p>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="cancelIndex">
                  关闭窗口
                </el-button>
              </span>
            </template>
        </el-dialog>
    </div>


</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {reqOrderInfo, reqQrCode, reqOrderCancel, reqQueryPayState} from '@/api/user/index.ts'
import type {OrderResponseData, QrCode, PayResult} from '@/api/user/type.ts'
//生成二维码的插件
import QRCode from 'qrcode'
import {ElMessage} from "element-plus";

let $route = useRoute()
const centerDialogVisible = ref(false)
let timer = ref<any>()
let orderInfo = ref({})
let imgUrl = ref<string>('')
onMounted(() => {
    fetchOrderInfo()
})

//获取订单的数据
const fetchOrderInfo = async () => {
    let result: OrderResponseData = await reqOrderInfo($route.query?.orderId as number)
    if (result.code == 200) {
        orderInfo.value = result.data
    }
}

//取消订单的回调
const cancel = async () => {
    try {
         await reqOrderCancel(<string>$route.query.orderId)
        //再次获取订单详情的数据
        await fetchOrderInfo()
    } catch (error) {
        ElMessage({
            type:'error',
            message:'取消回调成功，但是后台问题，无法正确取消'
        })
    }
}

//点击支付按钮的回调
const changeQrCode = async () => {
    centerDialogVisible.value = true
    //获取支付需要使用的二维码信息
    let result: QrCode = await reqQrCode(<string>$route.query.orderId)
    //根据服务器返回的二维码信息生成二维码图片
    imgUrl.value = await QRCode.toDataURL(result.data.codeUrl)
    //开始询问服务器当前交易的结果：开启长轮询
    //<string>$route.query.orderId
    timer.value = setInterval(async () => {
        // reqQueryPayState(<string>$route.query.orderId)
        let result: PayResult = await reqQueryPayState('3159')
        // 如果服务器返回的数据data：true，代表支付成功
        if (result.data) {
            //关闭对话框
            centerDialogVisible.value = false
            //提示信息
            ElMessage({
                type: 'success',
                message: '支付成功'
            })
            //再次获取订单详情的数据
            await fetchOrderInfo()
            clearInterval(timer.value)
        }
    }, 2000)
}

//关闭窗口的回调
const cancelIndex = () => {
    if (centerDialogVisible.value) {
        centerDialogVisible.value = false;
    }
    clearInterval(timer.value)
}

</script>


<style scoped lang="scss">
.box-card {
  .detail {
    color: #7f7f7f;
    font-weight: 800;
  }

  .top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #cccc;
    padding: 10px;

    .tag {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .right_info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 40px;
        height: 40px;
      }

      .info {
        font-size: 12px;
        line-height: 20px;
        margin-left: 10px;
      }
    }


  }

  .bottom {
    display: flex;
    margin-top: 20px;

    .left {
      flex: 4;

      .btn {
        margin: 10px 0
      }
    }

    .right {
      flex: 6;
      margin-left: 10px;

      p {
        line-height: 15px;
        font-size: 13px;
        color: #7f7f7f;
      }
    }
  }
}

::v-deep(.el-dialog__body) {
  border-top: 1px solid #7f7f7f;
  border-bottom: 1px solid #7f7f7f;
}

.qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>